import { onMounted } from 'vue'

//
export default function (name: string, fileName: string = '签名') {
  const config = {
    lineWidth: 2, // 线宽
    strokeStyle: 'red', // 线条颜色
    lineCap: 'round', // 设置线条两端圆角
    lineJoin: 'round', // 线条交汇处圆角
  }

  // 记录鼠标是否按下
  let mouseDown: boolean = false
  // 画板的dom对象
  let canvas: HTMLCanvasElement
  // 绘制对象
  let ctx: CanvasRenderingContext2D

  // 绘制记录
  const history: string[] = []
  // 当前撤回了几步
  let recallStep: number = 0

  // 初始化的函数
  const init = () => {
    canvas = document.querySelector(name) as HTMLCanvasElement

    // 规定 canvas 的宽高
    const { clientHeight, clientWidth } = canvas
    canvas.height = clientHeight
    canvas.width = clientWidth

    ctx = canvas.getContext('2d') as CanvasRenderingContext2D

    // 把空白图保存进步骤
    history.push(preservation())
  }

  // 鼠标按下事件 / 开始绘制
  const startDrawing = (event: MouseEvent) => {
    const { offsetX, offsetY } = event
    ctx.beginPath()

    // 根据配置文件设置相应配置
    ctx.lineWidth = config.lineWidth
    ctx.strokeStyle = config.strokeStyle
    ctx.lineCap = config.lineCap as CanvasLineCap
    ctx.lineJoin = config.lineJoin as CanvasLineJoin

    // 创建绘制开始
    ctx.moveTo(offsetX, offsetY)

    // 标记为鼠标按下
    mouseDown = true

    // 当从新开始绘制时,初始化撤回信息
    if (recallStep) {
      // 把被撤销的步骤全部清空掉
      history.splice(0 - recallStep)
      recallStep = 0
    }
  }

  // 鼠标移动过程 / 绘制
  const Drawing = (event: MouseEvent) => {
    // 只有在鼠标按下时才触发
    if (!mouseDown) return
    // 获取当前坐标点位
    const { offsetX, offsetY } = event
    // 绘制一段路线
    ctx.lineTo(offsetX, offsetY)

    // 绘制
    ctx.stroke()
  }

  // 鼠标抬起 / 结束绘制
  const endDrawing = () => {
    // 只有在鼠标按下时才触发
    if (!mouseDown) return
    // 结束绘制
    ctx.closePath()
    // 移除鼠标移动或手势移动监听器
    // 标记为鼠标抬起
    mouseDown = false
    // 保存当前绘制
    history.push(preservation())
  }

  // 保存为图片
  const preservation = () => {
    return canvas.toDataURL('image/png', {
      width: canvas.width,
      height: canvas.height,
      quality: 1,
    })
  }

  // 下载图片
  const downLoad = () => {
    const a = document.createElement('a')
    // 设置 a 标签的下载文件名
    a.download = `${fileName}.png`
    // 设置 a 标签的跳转路径为 文件流地址
    a.href = preservation()
    // 手动触发 a 标签的点击事件
    a.click()
    // 移除 a 标签
    a.remove()
  }

  // 清空画布
  const canvasEmptying = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    history.push(preservation())
  }

  // 撤销or取消撤销 / 上一步or下一步
  const step = (sign: boolean = true) => {
    // 获取步骤表
    const url = history[history.length - recallStep - (sign ? 2 : 0)]

    if (!url) {
      console.log(sign ? '没有上一步了' : '没有下一步了')
      return
    }

    // 创建一个img标签
    const img = document.createElement('img')
    // 从历史记录中取出上一步的图片信息
    img.src = url
    // 图片标签加载完成后绘制到画布中
    img.addEventListener('load', () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      // 绘制完成后释放标签
      img.remove()
      // 撤回步骤+1或者-1
      sign ? recallStep++ : recallStep--
    })
  }

  const previousStep = step.bind(null, true)
  const nextStep = step.bind(null, false)

  onMounted(init)
  return { startDrawing, Drawing, endDrawing, downLoad, canvasEmptying, previousStep, nextStep }
}
